<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="styles/style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="styles/style.responsive.css" media="all">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|PT+Sans&subset=latin">

    <script src="styles/jquery.js"></script>
    <script src="styles/script.js"></script>
    <script src="styles/script.responsive.js"></script>


	<!-- SLIDE -->
	<script>jQuery(function($) {
	    'use strict';
	    if ($.fn.slider) {
	        $(".art-slidecontainertshutterstock_6037720901").each(function () {
	            var slideContainer = $(this), tmp;
	            var inner = $(".art-slider-inner", slideContainer);
	            var helper = null;
	
	            if ($.support.transition) {
	                helper = new BackgroundHelper();
	                helper.init("horizontal", "next", $(".art-slide-item", inner).first().css($.support.transition.prefix + "transition-duration"));
	                inner.children().each(function () {
	                    helper.processSlide($(this));
	                });
	
	            }
	
	
	            inner.children().eq(0).addClass("active");
	            slideContainer.slider({
	                pause: 2600,
	                speed: 600,
	                repeat: true,
	                animation: "horizontal",
	                direction: "next",
	                navigator: slideContainer.siblings(".art-slidenavigatortshutterstock_6037720901"),
	                helper: helper                
	            });
	        });
	    }
	});
	</script>
	
	
	<style>.art-content .art-postcontent-0 .layout-item-0 { border-top-width:1px;border-top-style:solid;border-top-color:#97C6DD;margin-top: 10px;margin-bottom: 10px;  }
	.art-content .art-postcontent-0 .layout-item-1 { padding-right: 10px;padding-left: 10px;  }
	.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
	.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
	
	.art-slidecontainertshutterstock_6037720901 {
	    position: relative;
	        width: 843px;
	    height: 295px;
	        }
	
	.art-slidecontainertshutterstock_6037720901 .art-slide-item
	{
	
	}
	
	.art-slidecontainertshutterstock_6037720901 .art-slide-item {
	    -webkit-transition: 600ms ease-in-out left;
	    -moz-transition: 600ms ease-in-out left;
	    -ms-transition: 600ms ease-in-out left;
	    -o-transition: 600ms ease-in-out left;
	    transition: 600ms ease-in-out left;
	    position: relative;
	    display: none;
	    width:  100%;
	    height: 100%;
	}
	
	.art-slidecontainertshutterstock_6037720901 .active, .art-slidecontainertshutterstock_6037720901 .next, .art-slidecontainertshutterstock_6037720901 .prev {
	    display: block;
	}
	
	.art-slidecontainertshutterstock_6037720901 .active {
	    left: 0;
	}
	
	.art-slidecontainertshutterstock_6037720901 .next, .art-slidecontainertshutterstock_6037720901 .prev {
	    position: absolute;
	    top: 0;
	    width: 100%;
	}
	
	.art-slidecontainertshutterstock_6037720901 .next {
	    left: 100%;
	}
	
	.art-slidecontainertshutterstock_6037720901 .prev {
	    left: -100%;
	}
	
	.art-slidecontainertshutterstock_6037720901 .next.forward, .art-slidecontainertshutterstock_6037720901 .prev.back {
	    left: 0;
	}
	
	.art-slidecontainertshutterstock_6037720901 .active.forward {
	    left: -100%;
	}
	
	.art-slidecontainertshutterstock_6037720901 .active.back {
	    left: 100%;
	}
	
	
	
	
	.art-slidetshutterstock_60377209010 {
	    background-image:  url('images/slidetshutterstock_60377209010.jpg');
	        background-size:  100%;
	        background-position:  0 0;
	    background-repeat: no-repeat;
	}
	.art-slidetshutterstock_60377209011 {
	    background-image:  url('images/slidetshutterstock_60377209011.jpg');
	        background-size:  100%;
	        background-position:  0 0;
	    background-repeat: no-repeat;
	}
	.art-slidetshutterstock_60377209012 {
	    background-image:  url('images/slidetshutterstock_60377209012.jpg');
	        background-size:  100%;
	        background-position:  0 0;
	    background-repeat: no-repeat;
	}
	
	
	.art-slidenavigatortshutterstock_6037720901 {
	  display: inline-block;
	  position: absolute;
	  direction: ltr !important;
	  top: 300px;
	  left: 50%;
	  z-index: 101;
	  line-height: 0 !important;
	  -webkit-background-origin: border !important;
	  -moz-background-origin: border !important;
	  background-origin: border-box !important;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  text-align: center;
	    white-space: nowrap;
	    }
	.art-slidenavigatortshutterstock_6037720901
	{
	background: #75CFF0;background: transparent;background: transparent;background: transparent;background: transparent;background: transparent;background: transparent;-svg-background: transparent;
	}
	.art-slidenavigatortshutterstock_6037720901 > a
	{
	background: #1382AA;background: #1382AA;background: #1382AA;background: #1382AA;background: #1382AA;background: #1382AA;background: #1382AA;-svg-background: #1382AA;
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
	
	border:1px solid #18A8DC;
	
	margin:0 10px 0 0;
	
	width: 7px;
	
	height: 7px;
	}
	.art-slidenavigatortshutterstock_6037720901 > a.active
	{
	background: #E15F41;background: #E15F41;background: #E15F41;background: #E15F41;background: #E15F41;background: #E15F41;background: #E15F41;-svg-background: #E15F41;
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
	
	border:1px solid transparent;
	
	margin:0 10px 0 0;
	
	width: 7px;
	
	height: 7px;
	}
	.art-slidenavigatortshutterstock_6037720901 > a:hover
	{
	background: #3986AC;background: #3986AC;background: #3986AC;background: #3986AC;background: #3986AC;background: #3986AC;background: #3986AC;-svg-background: #3986AC;
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
	
	border:1px solid #4F9DC4;
	
	margin:0 10px 0 0;
	
	width: 7px;
	
	height: 7px;
	}
	
	</style>
	
	
	<!-- END SLIDE -->

	<tiles:insertAttribute name="head" ignore="true"/>
</head>
<body>
<div class="art-main">
	<!-- MENU -->
<nav class="art-nav clearfix desktop-nav">
    <div class="art-nav-inner">
    	
    	<ul class="art-hmenu">
    		<li><a href="#" class="active">Home</a></li>
    		<li><a href="crudCategory.do">Category</a></li>
    		<li><a href="crudProduct.do">Product</a></li>
    		<li><a href="#">Order</a></li>
    		<li><a href="#">Customer</a></li>
    		<li><a href="#">Statistic</a></li>
    		<li><a href="#">Account</a></li>
    		<li><a href="#">Blog Page</a></li>
   		</ul> 
    
    </div>
</nav>
<!-- END MENU -->

<div class="art-sheet clearfix">
	<div class="art-layout-wrapper clearfix">
		<div class="art-content-layout">
	        <div class="art-content-layout-row">
	        	
	        	<!--Body-ContentPlaceHolder-->
				<tiles:insertAttribute name="body">
					<!--/Body-ContentPlaceHolder-->
		        	<!-- LEFT CONTENT -->
	                    
					<!-- END LEFT CONTENT -->
	
					
					<!-- SIDE BAR -->
	                
						<!-- END SEACH BLOCK -->
						
						<!-- CATEGORY BLOCK -->
						
						<!-- END CATEGORY BLOCK -->
					
					<!-- END SIDE BAR -->
				</tiles:insertAttribute>
	        	
				        	
	        </div>
        </div>	    	
	</div>
</div>
    
<!-- FOOTER -->    
<footer class="art-footer clearfix">
  <div class="art-footer-inner">
<p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p>
<p>Copyright © 2012. All Rights Reserved.</p>
    <p class="art-page-footer">
        <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
    </p>
  </div>
</footer>
<!-- END FOOTER -->

</div>


<div id="art-resp">
	<div id="art-resp-m"></div>
	<div id="art-resp-t"></div>
</div>

</body>
</html>